<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<!-- 
  1、先打出结构
  2、然后每一行变成字符串
  3、做成数组
-->

<body>
  <ul id="list">
    
  </ul>
  <script>
    const user = [
      { name: 'jk', age: 23, sex: 'female' },
      { name: 'jk2', age: 24, sex: 'male' },
      { name: 'jk3', age: 23, sex: 'female' }
    ]
    
    let list = document.getElementById('list')

    for (let i = 0; i < user.length; i++) {
      list.innerHTML += [
        '<li>',
        '  <div class="hd">' + user[i].name + '的信息</div>',
        '  <div class="bd">',
        '    <p>姓名：' + user[i].name + '</p>',
        '    <p>年龄：' + user[i].age + '</p>',
        '    <p>性别：' + user[i].sex + '</p>',
        '  </div>',
        '</li>'
      ].join('')
    }
  </script>
</body>
</html>